<template>
    <div>
        <div class="table">
            <el-table 
            :data="tableData" 
            style="width: 100%" 
            max-height="500" 
            stripe 
            border 
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{textAlign:'center'}"
            >
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="taskID" label="任务ID" width="150">
                    <template #default="scope">
                        <div style="user-select:text ;">
                            <el-tooltip
                                raw-content
                                class="box-item"
                                popper-class="idtip"
                                effect="dark"
                                :content="getToolTipContent(scope.row.taskID)"
                                placement="top"
                                style="user-select:text ;"
                            >
                                <div class="IDStr">{{scope.row.taskID}}</div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="taskName" label="任务名" width="120" />
                <el-table-column prop="taskStatus" label="任务状态" width="120" />
                <el-table-column prop="executeBy" label="执行人" width="120" />
                <el-table-column prop="executeStart" label="开始时间" width="155" :formatter="formatTime1" />
                <el-table-column prop="executeEnd" label="结束时间" width="155" :formatter="formatTime2" />
                <el-table-column prop="executeLogID" label="日志ID" />
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200, 250, 300]"
                :small="false"
                :disabled="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="loadData"
                @current-change="loadData"
                total-text="总共"
                style="justify-content:end"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import RPAApi from '../../../apis/rpa'
import { table } from 'console';
import { formatTime } from '../../../utils/TimeUtils';

const router = useRouter();
const route = useRoute();

var tableData:any = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(200)

const tagName = ref("");
const isShowCreateEnvTagDialog = ref(false);
const isShowEditEnvTagDialog = ref(false);
const selectedData = ref({});

onMounted(()=>{
    loadData();
})

const loadData = () => {
    RPAApi.fetchDetail(currentPage.value-1, pageSize.value).then(ret=>{
        if(ret.code == 0){
            tableData.value = ret.data.list;
            total.value = ret.data.totalCount;
            currentPage.value = ret.data.page+1;
            pageSize.value = ret.data.pageSize;
        }else{
            ElMessage({
            type: 'error',
            message: ret.message,
        })
        }
    }).catch(err=>{
        ElMessage({
            type: 'error',
            message: err,
        })
    })
}

const formatTime1 = (row:any, column:any, cellValue:any, index:any)=>{
    return formatTime({createTime:row.executeStart}, column, cellValue, index)
}
const formatTime2 = (row:any, column:any, cellValue:any, index:any)=>{
    return formatTime({createTime:row.executeEnd}, column, cellValue, index)
}

const getToolTipContent = (taskID:any)=>{
    return "<div style='user-select: text;'>" + taskID +"</div>";
}
</script>

<style scoped>
.searchArea {
    position: relative;
    padding-bottom: 10px;
}
.searchButton {
    margin-left: 0px;
}
.searchTextInput {
    width: 120px;
    margin-right: 10px;
}
.pagination {
    margin-top: 15px;
}
.addTagArea {
    display: inline-flex;
    position: absolute;
    right: 20px;
}
.IDStr {
    text-overflow:ellipsis; 
    width: 130px;
    overflow:hidden;
    white-space:nowrap;
}
</style>
